<template>
    <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>用户管理</el-breadcrumb-item>
        <el-breadcrumb-item>用户列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="box-card">
        <el-row :gutter="20">
            <el-col :span="7">
                <el-input placeholder="请输入内容" v-model="queryInfo.query" clearable @clear='getUserList'>
                 <el-button slot="append" icon="el-icon-search" @click="getUserList"></el-button>
                </el-input>
            </el-col>
            <el-col :span="4">
                <el-button type="primary" @click="addUsers">添加用户</el-button>
                <!-- 弹出框 -->
                <el-dialog title="提示" :visible.sync="addDialogVisible" width="50%"  @close='addDialogClose'>
                    <!-- 输入框 -->
                    <el-form ref="addFormRef" :model="addForm" label-width="70px" :rules="addFormRules">
                        <el-form-item label="用户名"  prop="username">
                        <el-input v-model="addForm.username" ></el-input>
                        </el-form-item>
                        <el-form-item label="密码"  prop="password">
                        <el-input v-model="addForm.password" ></el-input>
                        </el-form-item>
                        <el-form-item label="手机"  prop="mobile">
                        <el-input v-model="addForm.mobile" ></el-input>
                        </el-form-item>
                        <el-form-item label="邮箱"  prop="email">
                        <el-input v-model="addForm.email" ></el-input>
                        </el-form-item>
                    </el-form>
                    <span slot="footer" class="dialog-footer">        
                        <el-button @click="addDialogVisible = false">取 消</el-button>
                        <el-button type="primary" @click="addUser">确 定</el-button>
                    </span>
                </el-dialog>
            </el-col>

        </el-row>
        <!-- 用户列表区 -->
            <el-table :data="userList" style="width: 100%" border stripe>
                <el-table-column type="index"></el-table-column>
                <el-table-column prop="username"  label="姓名" width="180"></el-table-column>
                <el-table-column prop="email" label="邮箱" ></el-table-column>
                <el-table-column prop="mobile"  label="电话"></el-table-column>
                <el-table-column prop="role_name"  label="角色"></el-table-column>
                <el-table-column  label="状态">
                    <template slot-scope="scope">
                        <el-switch v-model="scope.row.mg_state" active-color="#13ce66" inactive-color="#ff4949" @change='switchChange(scope.row)'>

                        </el-switch>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <!-- 修改用户信息 -->
                        <el-button type="primary" icon="el-icon-edit" size="mini" @click="showEidtorDialog(scope.row.id)"></el-button>
                        <!-- 删除用户 -->
                        <el-button type="danger" icon="el-icon-delete" size="mini" @click="deleteUsers(scope.row.id)"></el-button>
                        <!-- 分配角色 -->
                        <el-tooltip effect="dark" content="分配角色" placement="top-start" :enterable='false'>
                            <el-button type="warning" icon="el-icon-setting" size="mini"></el-button>
                        </el-tooltip>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页显示区 -->
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryInfo.pagenum" :page-sizes="[1, 2, 5, 10]" :page-size="queryInfo.pagesize" layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
            </el-card>
            <!-- 修改用户信息对话框 -->
            <el-dialog
                title="提示"
                :visible.sync="editDialogVisible"
                width="50%"
                @close='editDialogClose'
                >
                <el-form ref="editFormRef" :model="editForm" label-width="70px" :rules="editFormRules">
                        <el-form-item label="用户名"  prop="username" >
                        <el-input v-model="editForm.username" disabled></el-input>
                        </el-form-item>
                        <el-form-item label="手机"  prop="mobile">
                        <el-input v-model="editForm.mobile" ></el-input>
                        </el-form-item>
                        <el-form-item label="邮箱"  prop="email">
                        <el-input v-model="editForm.email" ></el-input>
                        </el-form-item>
                    </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="editDialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="editUserInfo">确 定</el-button>
                </span>
            </el-dialog>
    </div>  
</template>

<script>
export default {
    data(){
        return {
            queryInfo:{
                query:'',
                pagenum:1,
                pagesize:2
            },
            total:0,
            userList:[],
            addDialogVisible: false,
            addForm:{
                username:'',
                password:'',
                mobile:'',
                email:''
            },
            addFormRules:{
                username: [
            { required: true, message: '请输入活动名称', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
            ],
            password: [
                { required: true, message: '请输入密码', trigger: 'blur' },
                { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
            ],
            mobile: [
                { required: true, message: '请输入手机号码', trigger: 'blur' },
                { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
            ],
            email: [
                { required: true, message: '请输入邮箱', trigger: 'blur' },
                { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
            ]
            },
            editDialogVisible:false,
            editForm:{ },
            editFormRules:{
                username: [
                { required: true, message: '请输入活动名称', trigger: 'blur' },
                { min: 3, max: 11, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                ],
                mobile: [
                { required: true, message: '请输入手机号码', trigger: 'blur' },
                { min: 3, max: 11, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                ],
                email: [
                    { required: true, message: '请输入邮箱', trigger: 'blur' },
                    { min: 3, max: 11, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                ]}
            }

    },
    created(){
        this.getUserList()
    },
    methods:{
        async getUserList(){     
        const {data:res} = await  this.$http.get('users',{params:this.queryInfo})
        // console.log(res)
        this.total = res.data.total
        this.userList = res.data.users
        },
        handleSizeChange(newSize){
            this.queryInfo.pagesize = newSize
            this.getUserList()   
        },
        handleCurrentChange(newPage){
           this.queryInfo.pagenum = newPage
           this.getUserList()
        },
        async switchChange(msg){
            
        const {data:res} = await  this.$http.put(`users/${msg.id}/state/${msg.mg_state}`)
        // console.log(res)
        if(res.meta.status!==200){
            msg.mg_state = !msg.mg_state
            return this.$message.error('修改状态失败');    
            }else{
                return this.$message.success('修改成功')
            }

        },
        addUsers(){
            this.addDialogVisible=!this.addDialogVisible
        },
        addDialogClose(){
            this.$refs.addFormRef.resetFields()
        },
        addUser(){
            this.$refs.addFormRef.validate(async valid=>{
                if(!valid){
                    return 
                }else{
                 const {data:res}= await this.$http.post('users',this.addForm)
                    if(res.meta.status!==201){
                        return this.$message.error('创建失败')
                    }else{
                        this.$message.success("创建成功")
                        this.addDialogVisible=!this.addDialogVisible
                        this.getUserList()
                    }
                }
           })
        },
        async showEidtorDialog(id){
            this.editDialogVisible=true
            // console.log(id)
            const {data:res} = await   this.$http.get('users/'+id)
            // console.log(res)
            this.editForm = res.data
        },
        editDialogClose(){
            this.$refs.editFormRef.resetFields()
        },
        editUserInfo(){
            this.$refs.editFormRef.validate(async valid=>{
                if(!valid) return 
               const {data:res} = await this.$http.put('users/'+this.editForm.id,{email:this.editForm.email,mobile:this.editForm.mobile})
                if(res.meta.status!==200) return this.$message.error('修改用户信息失败')
                this.$message.success('修改用户信息成功')
                this.getUserList()
                this.editDialogVisible = false

           })
        },
        async deleteUsers(id){
            console.log(id)
            const reusltConfirm =await this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).catch(err=>err)

            if(reusltConfirm=='cancle') return this.$message.info("已经取消删除")
           const res = await this.$http.delete('users/'+id)
            if(res.request.status!==200) return this.$message.error("删除失败")
            this.$message.success("删除成功")
            this.getUserList()
       }

    }
}
</script>

<style lang='less' scoped>

    .el-breadcrumb{
        margin-bottom: 15px;
    }

</style>